<template name="my-navbar">
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar 
			:title="name"
			:fixed="true"
			:placeholder="true"
			:bgColor="bgColor==''?$s.theme:bgColor"
			:leftIconColor="fontColor==''?$s.fontcolor:fontColor"
			:titleStyle="{color:fontColor==''?$s.fontcolor:fontColor}"
			v-if="back"
		>
			<view class="u-nav-slot" slot="left">
				<u-icon :color="fontColor==''?$s.fontcolor:fontColor" name="arrow-left" size="22" @click="toback"></u-icon>
				<u-line :color="fontColor==''?$s.fontcolor:fontColor" direction="column" :hairline="false" length="18" margin="0 8px"></u-line>
				<u-icon :color="fontColor==''?$s.fontcolor:fontColor" name="home" size="26" @click="$c.a('index/index')"></u-icon>
			</view>
		</u-navbar>
		<u-navbar 
			:title="name"
			:fixed="true"
			:placeholder="true"
			:autoBack="back"
			:bgColor="bgColor==''?$s.theme:bgColor"
			:leftIconColor="fontColor==''?$s.fontcolor:fontColor"
			:titleStyle="{color:fontColor==''?$s.fontcolor:fontColor}"
			v-else="!back"
		><view slot="left"></view></u-navbar>
		<!-- #endif -->
		
		<!-- #ifdef MP-ALIPAY -->
			<u-navbar 
				:title="name"
				:fixed="true"
				:placeholder="true"
				:autoBack="back"
				:bgColor="bgColor==''?$s.theme:bgColor"
				:leftIconColor="fontColor==''?$s.fontcolor:fontColor"
				:titleStyle="{color:fontColor==''?$s.fontcolor:fontColor}"
				:safeAreaInsetTop="true"
			><view slot="left"></view></u-navbar>	
		<!-- #endif -->
	</view>
</template>

<script>
    export default {
		name:"my-navbar",
        props: {
            name: String,
            back: {
                type: [Boolean],
                default: true
            },
			backUrl: {
			    type: [String],
			    default: '',
			},
			backType: {
			    type: [String,Number],
			    default: 4,
			},
			bgColor: {
			    type: [String],
			    default: '',
			},
			fontColor: {
			    type: [String],
			    default: '',
			},
        },
        methods: {
			//返回上一页
			toback(){
				if(this.backUrl==''){
					this.$c.a(-1)
				}else{
					this.$c.a(this.backUrl,{},parseInt(this.backType))
				}
			}
        }
    }
</script>

<style class="scss">
/* 	.u-status-bar{
		background-color: var(--view-theme) !important;
	}
	.u-navbar__content {
		background-color: var(--view-theme) !important;
	}
	.u-navbar__content__title{
		color: var(--view-fontcolor) !important;
	}
	.u-navbar__content__left .u-icon__icon{
		color: var(--view-fontcolor) !important;
	} */
	.u-nav-slot{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-width: .5px;
		border-radius: 100px;
		padding: 3px 3px;
		opacity: 0.8;
		/* border: 1rpx solid #FFFFFF; */
	}
	.u-nav-slot2{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-width: .5px;
		border-radius: 100px;
		padding: 3px 7px;
		opacity: 1;
		margin-left: 15rpx;
	}
</style>